<template>
    <div class="index-box">
      <el-tabs type="border-card">
      	<el-tab-pane label="基本信息">
          <el-form class="formDialog" :model="user" label-position="right" :rules="rules" ref="user">
            <el-form-item label="用户名:" prop="nickname" label-width="125px">
                <el-input v-model="user.nickname" autocomplete="off" ></el-input>
                <p class="tips">用户名必须是以字母开头，数字、符号组合</p>
            </el-form-item>
            <el-form-item label="微信号:" prop="xcxOpenId" label-width="125px">
               <el-input v-model="user.xcxOpenId" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="登录密码:" prop="password" label-width="125px" v-if="!user.customerId">
              <el-input v-model="user.password" autocomplete="off" type="password"></el-input>
              <p class="tips">用于密码找回，请认真填写</p>
            </el-form-item>
            <el-form-item label="确认密码:" prop="surePassword" label-width="125px" class="address-box" v-if="!user.customerId">
                <el-input v-model="user.surePassword" autocomplete="off" type="password"></el-input>
                <p class="tips">认证第一次输入的密码</p>
            </el-form-item>
            <!-- <el-form-item label="详细地址:" prop="money" label-width="125px">
               <el-input v-model="user.remark" autocomplete="off" type="textarea" rows="3"></el-input>
            </el-form-item> -->
            <el-form-item label="手机号码:" prop="telephone" label-width="125px">
               <el-input v-model="user.telephone" autocomplete="off" ></el-input>
               <p class="tips">只能填写手机号</p>
            </el-form-item>
            <el-form-item label="用户邮箱:" prop="email" label-width="125px">
               <el-input v-model="user.email" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="性别:" prop="gender"  label-width="125px">
              <el-radio-group v-model="user.gender">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="状态:" prop="status" label-width="125px" >
              <el-radio-group v-model="user.status">
                  <el-radio label="1">启用</el-radio>
                  <el-radio label="2">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="推荐人手机号:" prop="parentTelephone" label-width="125px"  >
              <el-input v-model="user.parentTelephone" autocomplete="off" :disabled="user.customerId"></el-input>
            </el-form-item>
            <el-form-item label="" prop="" label-width="125px"  >

            </el-form-item>
            <el-form-item  label-width="125px">
              <el-button type="primary" @click="submitUser('user','1')" size="small" :loading="userLoading">保 存</el-button>
              <el-button @click="resetUserForm()" size="small">重 置</el-button>
            </el-form-item>
          </el-form>

      	</el-tab-pane>

      	<el-tab-pane label="实名认证" v-if="user.customerId">
            <el-form :model="idCardForm" label-position="right" :rules="idCardFormRules" ref="idCardForm">
              <el-form-item label="姓名:" prop="fullname" label-width="125px">
                  <el-input v-model="idCardForm.fullname" autocomplete="off" placeholder="您的真实姓名"></el-input>
              </el-form-item>
              <el-form-item label="身份证号:" prop="idcardNumber" label-width="125px">
                 <el-input v-model="idCardForm.idcardNumber" autocomplete="off"  placeholder="您的身份证号"></el-input>
              </el-form-item>

             <el-form-item label="身份证正面图:" prop="idcardFrontPic" label-width="125px">
                <MyUpImg :imagePreview='idCardForm.idcardFrontPic' imageSize="chang" @change="imageChange($event, 'idcardFrontPic')" ></MyUpImg>
              </el-form-item>
              <el-form-item label="身份证反面图:" prop="idcardBackPic" label-width="125px">
                 <MyUpImg :imagePreview='idCardForm.idcardBackPic' imageSize="chang" @change="imageChange($event, 'idcardBackPic')" ></MyUpImg>
              </el-form-item>
              <el-form-item label="" prop="idCardContrary" label-width="125px" >
                 <el-button type="primary" @click="submitUser('idCardForm','2')" size="small" :loading="userLoading" :disabled="realStatus=='1'">{{realStatus=='1'?'审核中...':'提交申请'}}</el-button>
              </el-form-item>
            </el-form>
      	</el-tab-pane>


      </el-tabs>
    </div>
</template>

<script>
  import { isCard,isPhone,isEmail } from '../../common/validate.js';
  import {
    customerSave,selCustomer,addIdcard,updIdcardList
  } from '@/api/getData'
	export default {
		name: 'addUser',
		data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.user.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
			return {
        userLoading:false,
        statusList:[],
				submitLoading: false,
        idCardForm:{
            customerId: "",
            fullname:'',
            idcardNumber:'',
            idcardFrontPic:'',
            idcardBackPic:''
        },
        idCardFormRules:{
            fullname: [{required: true,message: '请输入姓名',trigger: 'blur'}],
            idcardNumber:[{ required: true,validator: isCard, trigger: 'blur'}],
            idcardFrontPic: [{required: true,message: '请上传身份证正面图',trigger: 'blur'}],
            idcardBackPic: [{required: true,message: '请上传身份证反面图',trigger: 'blur'}],
        },
				/*		表单数据		*/
				user: {
					customerId: "",
					nickname: "",
					xcxOpenId: "",
					password: "",
					surePassword: "",
					telephone: "1",
					email: "",
					gender: "",
					status: "1",
          userface:'https://qianzhi-mall.oss-cn-guangzhou.aliyuncs.com/minipro/images/head_error.png',
          parentTelephone:''
				},
				/*		表单数据		*/
        rules: {
        	nickname: [{required: true,message: '请输入用户名',trigger: 'blur'}],
          password: [{required: true,message: '请输入用户密码',trigger: 'blur'}],
          surePassword: [{required: true,validator: validatePass,trigger: 'blur'}],
          telephone: [{ required: true,validator: isPhone, trigger: 'blur'}],
          gender: [{required: true,message: '请选择性别',trigger: 'blur'}],
          status: [{required: true,message: '请选择状态',trigger: 'blur'}],
        },
        realname:'1',//0 修改  空新增  1不让修改
        realStatus:''
			}
		},
		mounted() {
      this.user.customerId = this.$route.query.customerId;
      this.idCardForm.customerId = this.$route.query.customerId;
      if(this.$route.query.customerId){
        this.dataInfo();
      }
		},
		activated() {
			//	如果第二次进入修改的数据不同，则重新获取数据
			if (this.$route.query.customerId != this.user.customerId) {
				this.user.customerId = this.$route.query.customerId;
				this.dataInfo()
			}
		},
		methods: {
      dataInfo(){
        selCustomer({customerId:this.user.customerId}).then((result) => {
          this.user.nickname = result.data.nickname;
          this.user.xcxOpenId = result.data.xcxOpenId;
          this.user.password = '';
          this.user.surePassword = '';
          this.user.telephone = result.data.telephone;
          this.user.email = result.data.email;
          this.user.gender = result.data.gender;
          this.user.status = result.data.status;
          this.user.parentTelephone = result.data.parentTelephone;
          this.idCardForm.fullname=  result.data.fullname
          this.idCardForm.idcardNumber=  result.data.idcardNumber
          this.idCardForm.idcardFrontPic=  result.data.idcardFrontPic
          this.idCardForm.idcardBackPic=  result.data.idcardBackPic;
          this.realname = result.data.realname;
          this.realStatus = result.data.realStatus;
        });
      },
      resetUserForm(){
          //this.resetForm("user");
          selCustomer({customerId:this.user.customerId}).then((result) => {
            this.user.nickname = result.data.nickname;
            this.user.xcxOpenId = result.data.xcxOpenId;
            this.user.password = '';
            this.user.surePassword = '';
            this.user.telephone = result.data.telephone;
            this.user.email = result.data.email;
            this.user.gender = result.data.gender;
            this.user.status = result.data.status;
          });
      },
      imageChange(path, name) {
        this.idCardForm[name] = path
      },
      submitUser(formName,type) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            if(type == 1){
              customerSave(this.user).then((result) => {
                if (result.code == 200) {
                  this.$message.success(result.msg);
                  this.user.customerId = result.data;
                  this.idCardForm.customerId = result.data;
                  this.dataInfo();
                } else {
                  this.$message.error(result.msg);
                }
                this.userLoading = false;
              });
            }else{
              if(this.realname=='1'){
                updIdcardList(this.idCardForm).then((result) => {
                   console.log(this.idCardForm)
                  if (result.code == 200) {
                    this.$message.success(result.msg);
                  } else {
                    this.$message.error(result.msg);
                  }
                  this.userLoading = false;
                });
              }else{
                addIdcard(this.idCardForm).then((result) => {
                  if (result.code == 200) {
                    this.$message.success(result.msg);
                  } else {
                    this.$message.error(result.msg);
                  }
                  this.userLoading = false;
                });
              }

            }

          }
        })
      },
			/*		退出当前界面		*/
			back() {
				var tabs = this.$store.state.tabs
				var newTabs = []

				for (var i = 0; i < tabs.length; i++) {
					if (tabs[i]['name'] != 'customer_customer_detail') {
						newTabs.push(tabs[i])
					}
				}

				this.$store.commit("setTabs", newTabs)

				this.$router.replace('/customer_customer/index')
			},

			save() {
				var formItem = this.$refs.formItem;
				formItem.validate((valid) => {
					if (valid) {
						this.submitLoading = true

						this.$axios({
							method: 'post',
							url: 'customer_customer/update',
							data: this.formItem
						}).then ((res) => {
							this.submitLoading = false

							if (res.success) {
								this.$message.success('操作成功，数据已成功保存')

								this.back()
							} else {
								this.$message.error(res.error_text)
							}
						})
					}
				})
			},

			resetPassword() {
				this.$confirm('此操作将重置会员登入密码为 888888 , 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
						method: 'post',
						url: 'customer_customer/resetpaw',
						data: {
							id: this.formItem.id
						}
					}).then ((res) => {
						if (res.success) {
							this.$message.success('重置密码成功')

						} else {
							this.$message.error(res.error_text)
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});


			},
		}
	}
</script>

<style lang="scss" scoped>
    .order-box /deep/ .el-descriptions-item__content{
      color:red;
      font-weight: bold;
    }
    .QRCodeBox{
      margin-left:40px;
      .title{font-size: 20px;margin-bottom: 10px;text-align: center;}
    }
    .tips{
      margin:0px;
      font-size: 12px;
      color:#AEAEAE;
    }
</style>
